<template>
    <div>
        <div class="news">
            <div class="news-0">
                <h1 :class="curIndex == 0 ? 'news-0-on' : ''" @click="onTab(0)">
                    申报须知
                </h1>
                <h1 :class="curIndex == 1 ? 'news-0-on' : ''" @click="onTab(1)">
                    申报表填报
                </h1>
                <h1 :class="curIndex == 2 ? 'news-0-on' : ''" @click="onTab(2)">
                    报名二维码
                </h1>
            </div>
            <div class="news-2">
                <div class="news-21" v-if="curIndex == 0">
                    <div class="remark" v-html="grData.content"></div>
                </div>
                <div class="news-22" v-if="curIndex == 1">
                    <div class="form-con1">
                        <div style="height:50px"></div>
                        <div class="pc-211">
                            <el-form
                                :model="formData"
                                :rules="rules"
                                ref="formData"
                                label-width="200px"
                                class="demo-ruleForm"
                            >
                                <div class="form-con">
                                    <el-form-item
                                        label="头像（免冠照片）"
                                        prop="coverImageUrl"
                                    >
                                        <el-upload
                                            action="http://www.jssggxh.com:8082/tianti_module_interface//file/fitment/upload"
                                            list-type="picture-card"
                                            :on-remove="handleRemove"
                                            :on-success="handleSuccess"
                                            :before-upload="beforeAvatarUpload"
                                            :on-exceed="handleExceed"
                                            :limit="1"
                                            multiple
                                        >
                                            <i class="el-icon-plus"></i>
                                        </el-upload>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item label="姓名" prop="name">
                                        <el-input
                                            v-model="formData.name"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item label="性别" prop="sex">
                                    <el-radio-group v-model="formData.sex">
                                        <el-radio label="1">男</el-radio>
                                        <el-radio label="2">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <div class="form-con">
                                    <el-form-item
                                        label="工作单位"
                                        prop="company"
                                    >
                                        <el-input
                                            v-model="formData.company"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item label="学历" prop="education">
                                    <el-select
                                        v-model="formData.education"
                                        placeholder="请选择学历"
                                        style="width:500px"
                                    >
                                        <el-option
                                            label="硕士"
                                            value="1"
                                        ></el-option>
                                        <el-option
                                            label="本科"
                                            value="2"
                                        ></el-option>
                                        <el-option
                                            label="大专"
                                            value="3"
                                        ></el-option>
                                        <el-option
                                            label="大专以下"
                                            value="4"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <div class="form-con">
                                    <el-form-item
                                        label="岗位职级"
                                        prop="professionalLevel"
                                    >
                                        <el-input
                                            v-model="formData.professionalLevel"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item
                                        label="职称"
                                        prop="professionalName"
                                    >
                                        <el-input
                                            v-model="formData.professionalName"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item
                                        label="身份证号"
                                        prop="idCard"
                                    >
                                        <el-input
                                            v-model="formData.idCard"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <el-form-item
                                    label="申请技能等级类型"
                                    prop="skillLevel"
                                >
                                    <el-select
                                        v-model="formData.skillLevel"
                                        placeholder="请选择申请技能等级类型"
                                        style="width:500px"
                                    >
                                        <el-option
                                            label="四级/中级工 "
                                            value="1"
                                        ></el-option>
                                        <el-option
                                            label="三级/高级工"
                                            value="2"
                                        ></el-option>
                                        <el-option
                                            label="二级/技师"
                                            value="3"
                                        ></el-option>
                                        <el-option
                                            label="一级/高级技师"
                                            value="4"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <div class="form-con">
                                    <el-form-item
                                        label="联系方式"
                                        prop="mobile"
                                    >
                                        <el-input
                                            v-model="formData.mobile"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item
                                        label="微信/QQ"
                                        prop="tencent"
                                    >
                                        <el-input
                                            v-model="formData.tencent"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item
                                        label="考试号码"
                                        prop="examNum"
                                    >
                                        <el-input
                                            v-model="formData.examNum"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item label="上机号码" prop="pcNum">
                                        <el-input
                                            v-model="formData.pcNum"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item
                                        label="申请理由"
                                        prop="reason"
                                    >
                                        <el-input
                                            type="textarea"
                                            v-model="formData.reason"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                                <div class="form-con">
                                    <el-form-item
                                        label="单位意见"
                                        prop="opinion"
                                    >
                                        <el-input
                                            v-model="formData.opinion"
                                            style="width:500px"
                                        ></el-input>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                        <div class="pc-212">
                            <a href="JavaScript:;" @click="onRelease">提交</a>
                        </div>
                    </div>
                </div>
                <div v-if="curIndex == 2" class="erweima">
                    <img src="../../../assets/erweima.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import comHeard from "@/components/com-heard";
import comFoot from "@/components/com-foot";
import _ from "underscore";
import moment from "moment";
import { validPhone, validEmpty } from "@/utils/validate";

export default {
    components: {
        comHeard,
        comFoot,
    },
    props: {
        navList: {
            type: Array,
        },
        curTopIndex: {
            type: Number,
        },
    },
    data() {
        const validateUsername = (rule, value, callback) => {
            if (validEmpty(value)) {
                callback(new Error("手机号不能为空"));
            } else if (!validPhone(value)) {
                callback(new Error("请输入正确的手机号"));
            } else {
                callback();
            }
        };
        return {
            curIndex: 0,
            grData: {},
            formData: {
                coverImageUrl: [],
            },
            rules: {
                name: [
                    { required: true, message: "请输入姓名", trigger: "blur" },
                ],
                sex: [
                    {
                        required: true,
                        message: "请选择性别",
                        trigger: "change",
                    },
                ],
                company: [
                    {
                        required: true,
                        message: "请输入工作单位",
                        trigger: "blur",
                    },
                ],
                education: [
                    {
                        required: true,
                        message: "请选择学历",
                        trigger: "change",
                    },
                ],
                professionalLevel: [
                    {
                        required: true,
                        message: "请输入岗位职级",
                        trigger: "blur",
                    },
                ],
                professionalName: [
                    { required: true, message: "请输入职称", trigger: "blur" },
                ],
                idCard: [
                    {
                        required: true,
                        message: "请输入身份证号",
                        trigger: "blur",
                    },
                ],
                skillLevel: [
                    {
                        required: true,
                        message: "请选择申请技能等级类型",
                        trigger: "change",
                    },
                ],
                mobile: [
                    {
                        required: true,
                        validator: validateUsername,
                        trigger: "blur",
                    },
                ],
                tencent: [
                    {
                        required: true,
                        message: "请输入微信/QQ",
                        trigger: "blur",
                    },
                ],
                examNum: [
                    {
                        required: true,
                        message: "请输入考试号码",
                        trigger: "blur",
                    },
                ],
                pcNum: [
                    {
                        required: true,
                        message: "请输入上机号码",
                        trigger: "blur",
                    },
                ],
                reason: [
                    {
                        required: true,
                        message: "请输入申请理由",
                        trigger: "blur",
                    },
                ],
                opinion: [
                    {
                        required: true,
                        message: "请输入单位意见",
                        trigger: "blur",
                    },
                ],
                coverImageUrl: [
                    {
                        required: true,
                        message: "请上传资源图片",
                        trigger: "blur",
                    },
                ],
            },
            user: {},
        };
    },
    watch: {
        curTopIndex(val) {
            this.curIndex = 0;
            const id = this.navList[val].id;
            this.getCationsInfo(id);
        },
        navList: {
            handler(newValue, oldValue) {
                if (this.navList.length > 0) {
                    const id = this.navList[0].id;
                    this.getCationsInfo(id);
                }
            },
            deep: true,
        },
    },
    created() {
        this.user = this.$store.getters.user;
    },
    mounted() {},
    methods: {
        onTab(index) {
            console.log(this.user.registType);
            if (index > 0 && this.user.registType != 1) {
                this.$message.error("对不起，您的权限不足");
                return false;
            }
            this.curIndex = index;
        },
        async getCationsInfo(id) {
            const res = await this.$store.dispatch("access/getPersignerInfo", {
                id: id,
            });
            this.grData = res;
        },
        async setADDesigner() {
            this.formData.menuId = this.grData.id;
            this.formData.menuName = this.grData.title;
            this.formData.coverImageUrl = this.formData.coverImageUrl.join(",");
            const res = await this.$store.dispatch(
                "access/setADDesigner",
                this.formData
            );
            this.$message({
                message: "资质申请信息提交成功",
                type: "success",
            });
            this.$router.push("/grzz");
        },
        onRelease() {
            this.$refs.formData.validate((vaild) => {
                if (vaild) {
                    this.setADDesigner();
                }
            });
        },
        handleExceed(files, fileList) {
            this.$message.error("上传图片最多只能4张!");
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isPNG = file.type === "image/png";
            if (!isJPG && !isPNG) {
                this.$message.error("上传图片只能是 JPG或者PNG 格式!");
                return isJPG && isPNG;
            }
        },
        handleSuccess(res) {
            if (res.code == 200) {
                this.formData.coverImageUrl.push(res.data.url);
            }
        },
        handleRemove(file, fileList) {
            let index = this.formData.coverImageUrl.indexOf(
                file.response.data.url
            );
            this.formData.coverImageUrl.splice(index, 1);
        },
    },
};
</script>

<style scoped>
@import "./zizhisq.css";
</style>
